<template>
  <div class="conainer"  >
    <div style="min-width: 1200px;display: block;width: 1920px;margin:auto">
    <div class="header">
      <div class="center">
        <img :src="img(compData.logo)" height="66px" />
      </div>
      <div class="center"></div>
    </div>

    <div
      :style="{
        background: 'url(' + img(compData.banner) + ')',
      }"
      style="background-size: 100% 100%; height: 400px; color: white"
    >
      <div class="intro" style="width: 36%; margin-left: 10%">
        <div
          class="title_1"
          style="font-size: 36px; margin-top: 20px; width: 100%; color: white"
        >
          <!--          {{compData.deptName}}-->
        </div>
        <div
          class="discript"
          style="font-size: 22px; width: 100%; margin-top: 20px"
        >
          <!--          {{compData.intro}}-->
        </div>
      </div>
    </div>
    <div class="center" style="flex-direction: column; justify-content: center">
      <div class="subtitle">
        <span class="subtitle-color-grey"></span>
        <span class="subtitle-color-blue"></span>
      </div>

      <div v-if="products.length > 0" class="new-title">产品中心</div>
      <i v-if="products.length > 0" class="el-icon-caret-bottom"></i>
      <div v-if="products.length > 0" class="product" style="width: 80%">
        <el-row>
          <el-col
            :span="4"
            v-for="(item, index) in products"
            :key="item.moduleId"
            :offset="index % 5 > 0 ? 1 : 0"
            style="margin: 20px"
          >
            <el-card
              style="padding: 0px;height:350px;width:272px " shadow="hover"
            >
              <image-preview :src="item.moduleLogo" class="image" />

              <div style="padding: 14px">
                <span>{{ item.moduleName }}</span>
                <div class="bottom clearfix">
                  <el-button
                    type="text"
                    class="button"
                    style="float: right"
                    @click="toProduct(item.moduleId)"
                    >产品详情</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- background-size: 100% 100%; height: 300px; color: #fff -->
      <div v-if="solutions.length > 0" class="new-title">经典案例</div>
      <i v-if="solutions.length > 0" class="el-icon-caret-bottom"></i>
      <div
        v-if="solutions.length > 0"
        class="case"
        style="width: 80%; height: 300px"
      >
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in solutions" :key="item.title">
            <div
              :style="{
                background: 'url(' + img(item.moduleLogo) + ')',
                'background-size': '100% 100%',
                'background-repeat': 'no-repeat',
                height: '300px',
                color: 'white',
              }"
              @click="toProduct(item.moduleId)"
            >
              <div class="intro">
                <div class="title_1" style="color: white; margin: 0px">
                  {{ item.moduleName }}
                </div>
<!--                <div class="discript">-->
<!--                  {{ item.moduleIntro }}-->
<!--                </div>-->
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div v-if="cases.length > 0" class="new-title">解决方案</div>
      <i v-if="cases.length > 0" class="el-icon-caret-bottom"></i>

      <div v-if="cases.length > 0" class="carousel">
        <el-carousel type="card" :interval="4000" height="300px">
          <el-carousel-item v-for="item in cases" :key="item.title">
            <div
              :style="{
                background: 'url(' + img(item.moduleLogo) + ')',
                'background-size': '100% 100%',
                'background-repeat': 'no-repeat',
                height: '300px',
                color: 'white',
              }"
              @click="toProduct(item.moduleId)"
            >
              <div class="intro">
                <div class="title_1" style="color: white; margin: 0px">
                  {{ item.moduleName }}
                </div>
<!--                <div class="discript">-->
<!--                  {{ item.moduleIntro }}-->
<!--                </div>-->
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="center" style="margin-top: 20px; flex-direction: column">
        <div class="new-title">联系我们</div>
        <i class="el-icon-caret-bottom"></i>
      </div>

      <div
        style="
          margin-right: auto;
          margin-left: auto;
          text-align: left;
          line-height: 36px;
          max-width: 60%;
        "
      >
        <div>联系人：{{ compData.leader }}</div>
        <div>联系电话：{{ compData.phone }}</div>
        <div>邮箱：{{ compData.email }}</div>
        <div>微 信：</div>
        <img
          :src="wechat"
          style="
            margin-left: 10em;
            margin-bottom: 20px;
            height: 250px;
            width: 250px;
          "
        />
      </div>
    </div>
  </div></div>
</template>

<script>
import logo from "@/assets/logo/logo-large.png";
import banner1 from "@/assets/banners/banner-3.jpg";
import banner2 from "@/assets/banners/banner-4.jpg";
import vueSeamlessScroll from "vue-seamless-scroll";
import wechat from "@/assets/about/wechat.png";
import { getSupplierDetail } from "@/api/system/supplier";

export default {
  name: "Org",
  components: { vueSeamlessScroll },
  data() {
    return {
      logo: logo,
      wechat: wechat,
      active: 1,
      compData: {},
      moduleList: [],
      products: [],
      solutions: [
      ],

      classOption: {
        step: 0.3,
      },
    };
  },
  mounted() {
    this.products = [];
    this.solutions = [];
    this.cases = [];
    getSupplierDetail(this.$route.params.id).then((response) => {
      console.log(response.data, "response");
      this.moduleList = response.data.supplierModuleList;
      this.compData = response.data.sysDept;
      this.moduleList.forEach((item) => {
        if (item.moduleTag == "1") {
          this.products.push(item);
        } else if (item.moduleTag == "2") {
          this.solutions.push(item);
        } else {
          this.cases.push(item);
        }
      });
    });
  },
  methods: {
    img(e) {
      // console.log("http://localhost" + process.env.VUE_APP_BASE_API + e);
      return process.env.VUE_APP_BASE_API + e;
    },
    toProduct(e) {
      this.$router.push("/prod/" + e);
      console.log(e);
    },
  },
};
</script>
<style lang="scss" scoped>
.bg {
  // background-color: ;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  background-color: #ededf5;
  height: 59px;
}

.el-carousel__container {
  height: 270px !important;
}

.word-center {
  text-align: center;
}
</style>
<style lang="scss" scoped>
.conainer {
  min-width: 1200px;
  overflow: auto;
  height: 100%;

  .header {
    height: 76px;
    display: flex;
    justify-content: space-around;
  }

  .menu {
    background-color: #e5e5f1;
    height: 60px;
  }

  .subtitle {
    margin-top: 50px;
    display: flex;

    .subtitle-color-grey {
      color: #aaa;
      font-size: 30px;
      line-height: 50px;
    }

    .subtitle-color-blue {
      color: #197bba;
      font-size: 30px;
      line-height: 50px;
    }
  }

  .new-title {
    font-weight: 600;
    font-size: 28px;
    margin: 20px 0 10px 0;
  }

  .model-text {
    color: #666;
    margin: 35px 0 20px 0;
  }

  .carousel {
    width: 80%;
    height: 300px;
  }

  .intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-left: 70%;
    font-family: "黑体";

    .title_1 {
      font-size: 24px;
    }
    .discript {
      font-size: 16px;
    }
  }

  .obj-position {
    // display: flex;
    position: relative;
    // top: 500px;
    .maturity-wrap {
      height: 70%;
      min-height: 270px;
      width: 1200px;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 282px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;

      .fourObjBox-item {
        position: relative;
        width: 200px;
        height: 200px;

        .obj-OutsideCircular:after {
          content: "";
          display: block;
          width: 4px;
          height: 140px;
          background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#197bba),
            to(transparent)
          );
          background: linear-gradient(180deg, #197bba, transparent);
          position: absolute;
          left: 38px;
          top: 80px;
        }

        .obj-OutsideCircular {
          width: 80px;
          height: 80px;
          background-color: rgba(50, 150, 228, 0.5);
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;

          .obj-circular {
            width: 67px;
            height: 67px;
            background-color: #197bba;
            border-radius: 50%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            .obj-circular-text:first-of-type {
              margin-bottom: 0;
            }

            .obj-circular-text:nth-of-type(2) {
              margin-top: 0;
            }

            .obj-circular-text {
              font-size: 15px;
              color: #fff;
            }
          }
        }

        .obj-circular-container {
          width: 200px;
          position: absolute;
          left: 89px;

          .obj-circular-title {
            font-size: 19px;
            font-weight: 700;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background-color: #197bba;
          }

          .obj-circular-content-wrap {
            color: #fff;
            padding: 8px;
            border: 1px solid #fff;
            border-top-color: transparent;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            text-align: justify;

            .obj-item-name {
              font-size: 16px;
              line-height: 29px;
            }

            .obj-item-content {
              color: #eff0f3;
              font-size: 13px;
              line-height: 20px;
              letter-spacing: 3px;
            }
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 120px;
    background: #49a8ba;

    .bg {
      margin: 0 auto;
      width: 1200px;
      height: 120px;
      //background: url("https://www.jit.edu.cn/images/botLOGO.png") no-repeat
      //  15px center;
      .details {
        //float: left;
        display: block;
        width: 760px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        margin: 20px auto;
      }

      details > p {
        margin: 0;
      }
    }
  }
}
// :style="{
//         background: 'url(' + img(item.moduleLogo) + ')',
//       }"
.b1 {
  // background: url("../../../assets/banners/banner-1.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: white;
}

.b2 {
  //  background: url("../../../assets/banners/banner-2.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: #fff;
  .intro {
    margin-left: 20%;
  }
}

.b3 {
  //  background: url("../../../assets/banners/banner-3.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: #fff;
}
.b4 {
  //  background: url("../../../assets/banners/banner-4.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: #fff;
}
.seamless-warp {
  margin: 60px auto;
  width: 60%;
  max-height: 300px;
  overflow: hidden;
}
.image {
  width:272px !important;
  height: 272px !important;
  min-width:272px !important;
  margin-top: -15px;
  margin-left: -20px;

  display: block;
}
</style>
